<template>
  <div class="wrapper">
    <!--头部-->
    <header>
      <p>

        <i class="fa fa-caret-left" @click="toHomePage"></i>
      </p>
      <p>我的吃货豆</p>
    </header>
    <!--吃货豆显示-->


    <div class="pointNum">

      <img src="../assets/pointLogo.jpg">
      <h3>{{ pointShow }}</h3>


    </div>


    <div class="slogan">
      <p>吃货豆将在180天后失效</p>
    </div>


    <!--功能分类部分-->
    <div class="search">
      <div class="fixxed" ref="fixxedbox">

        <div class="left">
          <img src="../assets/left1.jpg">

        </div>
        <div @click="toPointUse()">
          <div class="right">
            <img src="../assets/right1.jpg">
          </div>
        </div>
      </div>
    </div>


    <!--明细查询部分-->


    <ul class="order">
      <li v-for="item in pointArr">
          <div class="detail-left">
            <h3>{{ item.transactionType }}</h3>
            <div class="time">
              <p>{{ item.recordDate}}</p>
            </div>
          </div>
          <div class="detail-right">
            <i class="fa fa-plus" v-if="item.transactionType=='获得'"></i>
            <h3>{{ item.pointAmount }}</h3>
          </div>
      </li>
    </ul>


  </div>
</template>


<script>
export default {
  name: 'PointLog',
  data() {
    return {
      user: {},
      isShowDetail: false,
      pointArr: [],
      pointShow: 0
    }
  },
  created() {
    this.user = this.$getSessionStorage('user');
    //TODO
    this.$axios.get('queryPointTransaction', {
      params: {
        userId: this.user.userId,
      }
    }).then(response => {
      this.pointArr = response.data;
      //console.log(this.pointArr);
    }).catch(error => {
      console.error(error);
    });
    //TODO
    this.$axios.get('queryPoint', {
      params: {
        userId: this.user.userId,
      }
    }).then(response => {
      this.pointShow = response.data;
    }).catch(error => {
      console.error(error);
    });
    //TODO
    this.$axios.get('queryPointTransaction', {
      params:{
        userId:this.user.userId
      }
    }).then(response => {
      this.pointArr = response.data;
    }).catch(error => {
      console.error(error);
    });
  },
  mounted() {
    document.onscroll = () => {
      //获取滚动条位置
      let s1 = document.documentElement.scrollTop;
      let s2 = document.body.scrollTop;
      let scroll = s1 == 0 ? s2 : s1;
      //获取视口宽度
      let width = document.documentElement.clientWidth;
      //获取顶部固定块

      let search = this.$refs.fixxedbox;

      //判断滚动条位置超过视口宽度的12%，搜索块变为固定定位
      if (scroll > width * 0.39) {
        search.style.position = 'fixed';
        search.style.left = '0';
        search.style.top = '0';
      } else {
        search.style.position = 'static'
      }
    }
  },
  destroyed() {
    //切到其他组件时去掉这个js
    document.onscroll = null;
  },
  methods: {
    detailShow() {
      this.isShowDetail = !this.isShowDetail;
    },
    toPointUse() {
      this.$router.push({path: '/pointUse'});
    },

//跳转到HomePage页面
    toHomePage() {
      this.$router.push({path: '/homePage'});
    }
  }
}


</script>


<style scoped>
/**************************总容器**************************/
.wrapper{
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
}
/**************************header**************************/
.wrapper header{
  width: 100%;
  height:12vw;
  background-color: #f6f6f6;
  color: #333333;
  font-size: 3.6vw;
  font-weight: bolder;
  letter-spacing: 2px;


  left:0;
  top: 0;


  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper header p{
  margin-right: 35vw;
}
/**************************积分显示**************************/
.wrapper .pointNum{




  margin-top: 5vw;

  background-color: #f6f6f6;


  display: flex;

  align-items: center;

  user-select: none;
}

.wrapper .pointNum  img{
  width: 6vw;
  height: 6vw;
  margin-left: 40vw;
}

.wrapper .pointNum h3{
  font-size: 8vw;
  font-weight:bold;
  margin-left: 1vw;
  padding-bottom: 1vw;
  color: #333333;
}

.wrapper .slogan{

  margin-bottom: 6vw;
  justify-content: center;
  font-size: 2vw;
  display: flex;

  align-items: center;

  user-select: none;
}

.wrapper .slogan h5{
  font-size:1vw;
  font-weight: normal;
}

/**************************search**************************/
.wrapper .search{


  background-color: #f6f6f6;
  height:11.5vw;


  display: flex;

  align-items: center;
}

.wrapper .search .left img{
  width: 16vw;
  height: 9vw;
  margin-left: 9vw;
}
.wrapper .search .right img{
  width: 16vw;
  height: 9vw;
  margin-left:24vw;
}


.wrapper .search .fixxed{
  width: 100%;
  height: 11.5vw;
  background-color: #f6f6f6;
  display: flex;
  justify-content: center;
  align-items: center;
}



/**************************明细**************************/

.wrapper .order{
  border-radius: 12px 12px 12px 12px;
  width: 100%;
  background-color:#ffffff;


}

.wrapper .order li{
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 2.5vw;
  border-bottom: solid 1px #DDD;
}

.wrapper .order li .detail-left{
  display: flex;
  flex-direction: column;

  justify-content: space-between;
}

.wrapper .order li .detail-left h3{
  font-weight: 500;
  font-size: 5vw;

  color: #333333;
  margin-bottom: 2vw;
}

.wrapper .order li .detail-left .time p{
  font-size: 3.5vw;
}

.wrapper .order li .detail-right{
  display: flex;
  align-items: center;
}

.wrapper .order li .detail-right .fa-plus{
  color: red;
  font-size: 2vw;
  margin-right: 0.5vw;
}

.wrapper .order li .detail-right h3{
  font-size: 5vw;
  color: red;
}
</style>